<template>
  <view class="viewport">
    <view class="list" v-if="profile">
      <navigator url="/pagesMember/address/address" hover-class="none" class="item arrow"
        >我的收货地址</navigator
      >
    </view>
    <view class="list">
      <button hover-class="none" class="item-2" open-type="openSetting">
        <text class="arrow">授权管理</text>
      </button>
      <button hover-class="none" class="item-2" open-type="feedback">
        <text class="arrow">问题反馈</text>
      </button>
      <button hover-class="none" class="item-2" open-type="contact">
        <text class="arrow">联系我们</text>
      </button>
    </view>

    <view class="logout" @tap="onLogout" v-if="profile">
      <button>退出登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from '@/stores'
import { computed } from 'vue'

const memberStore = useMemberStore()

const profile = computed(() => {
  return memberStore.profile
})

const onLogout = () => {
  // 模态弹窗
  uni.showModal({
    content: '是否确认退出登录？',
    success: (res) => {
      if (res.confirm) {
        // 清理用户信息
        memberStore.clearProfile()
        // 返回上一页
        uni.navigateBack()
      }
    },
  })
}
</script>

<style lang="scss" scoped>
.viewport {
  height: 100vh;
  padding: 20rpx;
  background-color: #f4f4f4;

  .list {
    background-color: #fff;
    padding: 0 20rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .item {
      width: 100%;
      padding: 20rpx 0;
      line-height: 1.4;
      font-size: 28rpx;
    }

    .item-2 {
      width: 100%;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      border: 0;
      border-radius: 0;
      line-height: inherit;
      text-align: left;
      background-color: transparent;
      border-bottom: 1px solid #ddd;

      &:nth-last-child(1) {
        border-bottom: 0;
      }
      text {
        padding: 20rpx 0;
        line-height: 1.4;
        display: inline-block;
        width: 100%;
      }
    }
    .arrow {
      position: relative;
      &::after {
        position: absolute;
        content: '\e6c2';
        font-family: 'erabbit' !important;
        right: 0;
        color: #333;
      }
    }
  }

  .logout {
    background-color: #fff;
    border-radius: 10rpx;

    button {
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      font-size: 32rpx;
      background: transparent;
    }
  }
}
</style>
